<template>
  <base-dialog v-if="inputIsValid" title="Invalid Input" @close="comfirmError">
    <template #default>
      <p>Unfortunately, at least one input value is invalid.</p>
      <p>Please check all inputs and try again.</p>
    </template>
    <template #actions>
      <base-button @click="comfirmError">Okey</base-button>
    </template>
  </base-dialog>
  <base-card>
    <form @submit.prevent="submitData">
      <div class="form-control">
        <label for="title">Title</label>
        <input id="title" name="title" type="text" ref="titleInput" />
      </div>
      <div class="form-control">
        <label for="description">Description</label>
        <textarea
          id="description"
          name="description"
          rows="3"
          ref="descInput"
        ></textarea>
      </div>
      <div class="form-control">
        <label for="link">Link</label>
        <input id="link" name="link" type="url" ref="linkInput" />
      </div>
      <div>
        <base-button type="submit">Add Resource</base-button>
      </div>
    </form>
  </base-card>
</template>

<script>
export default {
  inject: ['addResource'],
  data() {
    return {
      inputIsValid: false,
    };
  },
  methods: {
    submitData() {
      const enteredTitle = this.$refs.titleInput.value;
      const enteredDescription = this.$refs.descInput.value;
      const enterdUrl = this.$refs.linkInput.value;

      if (
        enteredTitle.trim() === '' ||
        enteredDescription.trim() === '' ||
        enterdUrl.trim() === ''
      ) {
        this.inputIsValid = true;
        return;
      }

      this.addResource(enteredTitle, enteredDescription, enterdUrl);
    },
    comfirmError() {
      this.inputIsValid = false;
    },
  },
};
</script>

<style scoped>
label {
  font-weight: bold;
  display: block;
  margin-bottom: 0.5rem;
}

input,
textarea {
  display: block;
  width: 100%;
  font: inherit;
  padding: 0.15rem;
  border: 2px solid var(--gray);
  padding: 0.5em;
}

input:focus,
textarea:focus {
  outline: none;
  border-color: var(--orange-light);
  background: var(--orange-light-2);
}

.form-control {
  margin: 1rem 0 1.6rem;
}
</style>
